<template>
  <div class="totalScreen">
    <div class="middleEcharts" id="middleEcharts"></div>
    <el-dialog title="新建装炉" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
      <el-form :model="form">
        <el-form-item label="选择炉室" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择炉室" popper-class="select">
            <el-option label="1" value="lushi1"></el-option>
            <el-option label="2" value="lushi2"></el-option>
            <el-option label="3" value="lushi3"></el-option>
            <el-option label="4" value="lushi4"></el-option>
            <el-option label="5" value="lushi5"></el-option>
            <el-option label="6" value="lushi6"></el-option>
            <el-option label="7" value="lushi7"></el-option>
            <el-option label="8" value="lushi8"></el-option>
            <el-option label="9" value="lushi9"></el-option>
            <el-option label="10" value="lushi10"></el-option>
            <el-option label="11" value="lushi11"></el-option>
            <el-option label="12" value="lushi12"></el-option>
            <el-option label="13" value="lushi13"></el-option>
            <el-option label="14" value="lushi14"></el-option>
            <el-option label="15" value="lushi15"></el-option>
            <el-option label="16" value="lushi16"></el-option>
            <el-option label="17" value="lushi17"></el-option>
            <el-option label="18" value="lushi18"></el-option>
            <el-option label="19" value="lushi19"></el-option>
            <el-option label="20" value="lushi20"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" :label-width="formLabelWidth">
          <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" popper-class="select">
          </el-date-picker>
          <el-time-picker v-model="form.value1" placeholder="任意时间点" popper-class="select">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="结束时间" :label-width="formLabelWidth">
          <el-date-picker v-model="form.date2" type="date" placeholder="选择日期" popper-class="select">
          </el-date-picker>
          <el-time-picker v-model="form.value2" placeholder="任意时间点" popper-class="select">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">提交</el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        type: [],
        value1: new Date(2016, 9, 10, 18, 40),
        value2: new Date(2016, 9, 10, 18, 40),
        date1: '',
        date2: ''
      },
      formLabelWidth: '120px'
    }
  },
  props: {
    echartsData: {
      type: Object,
      required: true
    }
  },
  watch: {
    echartsData: {
      handler(newVal, oldVal) {
        // console.log('newVal终于出来了电压电阻', newVal, oldVal)
        if (newVal !== undefined) {
          console.log(newVal,'1212121');
          this.initEcharts(newVal)
        }
      }
    }
  },
  computed: {},
  created() { },
  mounted() {
    // console.log(this.echartsData,'1212121');
  },
  methods: {
    initEcharts(e) {
      // console.log(e, '数据')
      var totalZero = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      var bTotal = []
      if (e.data.c1 !== undefined) {
        e.data.c1.forEach(item => {
          bTotal.push(parseInt(item.value))
        })
      } else {
        totalZero.forEach(item => {
          bTotal.push(item)
        })
      }
      if (e.data.c21 !== undefined) {
        e.data.c21.forEach(item => {
          bTotal.push(parseInt(item.value))
        })
      } else {
        totalZero.forEach(item => {
          bTotal.push(item)
        })
      }
      if (e.data.c3 !== undefined) {
        e.data.c3.forEach(item => {
          bTotal.push(parseInt(item.value))
        })
      } else {
        totalZero.forEach(item => {
          bTotal.push(item)
        })
      }
      if (e.data.c4 !== undefined) {
        e.data.c4.forEach(item => {
          bTotal.push(parseInt(item.value))
        })
      } else {
        totalZero.forEach(item => {
          bTotal.push(item)
        })
      }
      if (e.data.c5 !== undefined) {
        e.data.c5.forEach(item => {
          bTotal.push(parseInt(item.value))
        })
      } else {
        totalZero.forEach(item => {
          bTotal.push(item)
        })
      }
      if (e.data.c6 !== undefined) {
        e.data.c6.forEach(item => {
          bTotal.push(parseInt(item.value))
        })
      } else {
        totalZero.forEach(item => {
          bTotal.push(item)
        })
      }

      console.log(bTotal)
      var x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
      var y = ['C1', 'C2', 'C3', 'C4', 'C5', 'C6']

      var data = []
      var min = Infinity
      var max = -Infinity
      var total = 0
      let a = -1

      for (let j = 0; j < y.length; j++) {
        for (let i = 0; i < x.length; i++) {
          a += 1
          if (bTotal[a] < min) {
            min = bTotal[a]
          }
          if (bTotal[a] > max) {
            max = bTotal[a]
          }
          data.push([i, j, bTotal[a]])
          total += bTotal[a]
            // 临时
          // data.push([i,j,0])
        }
      }
      var mycharts = this.$echarts.init(document.getElementById('middleEcharts'))
      var option = {
        // tooltip: {},
        // animation: false,
        grid: [
          {
            containLabel: false,
            top: '8%',
            right: '6%',
            bottom: '20%',
            left: '6%'
          }
          // {
          //   containLabel: false,
          //   top: '8%',
          //   right: '14%',
          //   bottom: '20%',
          //   left: '75%'
          // },
          // {
          //   containLabel: false,
          //   top: '8%',
          //   right: '3%',
          //   bottom: '20%',
          //   left: '86%'
          // }
        ],
        xAxis: [
          {
            type: 'category',
            // name: '到站次数(F)',
            gridIndex: 0,
            nameGap: 0,
            // nameTextStyle: {
            //   align: 'center',
            //   verticalAlign: 'top',
            //   padding: [14, 0, 0, 0],
            //   color: '#444'
            // },
            data: x,
            axisLabel: {
              margin: 14,
              color: '#fff'
            },
            // splitArea: {
            //   show: true
            // },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
          // {
          //   type: 'category',
          //   gridIndex: 1,
          //   position: 'top',
          //   // name: '',
          //   // nameTextStyle: {
          //   //   align: 'center',
          //   //   verticalAlign: 'top',
          //   //   padding: [0, 0, 0, 0],
          //   //   color: '#fff'
          //   // },
          //   data: ['生产情况'],
          //   axisLabel: {
          //     margin: 14,
          //     color: '#fff'
          //   },
          //   axisLine: {
          //     show: false
          //   },
          //   axisTick: {
          //     show: false
          //   }
          // },
          // {
          //   type: 'category',
          //   gridIndex: 2,
          //   position: 'top',
          //   data: ['装炉情况'],
          //   axisLabel: {
          //     margin: 14,
          //     color: '#fff'
          //   },
          //   axisLine: {
          //     show: false
          //   },
          //   axisTick: {
          //     show: false
          //   }
          // }
        ],
        yAxis: [
          {
            type: 'category',
            name: '温控架',
            gridIndex: 0,
            nameGap: 0,
            nameTextStyle: {
              align: 'right',
              verticalAlign: 'bottom',
              padding: [0, 14, 0, 0],
              color: '#fff'
            },
            data: y,
            axisLabel: {
              margin: 14,
              color: '#fff'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
          // {
          //   type: 'category',
          //   gridIndex: 1,
          //   show: false
          // },
          // {
          //   type: 'category',
          //   gridIndex: 2,
          //   show: false
          // }
        ],
        visualMap: [
          {
            min: 1,
            max: 1200,
            seriesIndex: 0,
            padding: 0,
            calculable: true,
            orient: 'horizontal',
            inverse: true,
            top: '90%',
            right: '44%',
            itemWidth: 18,
            itemHeight: 114,
            inRange: {
              color: ['#125488', '#2a93d5', '#37caec'],
              symbolSize: [100, 100]
            },
            text: ['高', '低'],
            textGap: 8,
            textStyle: {
              color: '#fff'
            }
          }
        ],
        series: [
          {
            name: 'Punch Card',
            type: 'heatmap',
            data: data,
            gridIndex: 0,
            xAxisIndex: 0,
            yAxisIndex: 0,
            label: {
              show: true,
              // formatter: (p) => {
              //   const v = p.value[2]
              //   return `${v}`
              // },
              // textShadowColor: '#00e9f9',
              color: '#fff',
              textShadowBlur: 6,
              fontSize: 14
              // align: 'left'
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: 'rgba(12,145,255,.2)'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
          // 右边echarts
          //           {
          //             name: 'Punch Card',
          //             type: 'heatmap',
          //             data: [
          //               [
          //                 0,
          //                 0,
          //                 1
          //               ],
          //               [
          //                 0,
          //                 1,
          //                 1
          //               ],
          //               [
          //                 0,
          //                 2,
          //                 1
          //               ],
          //               [
          //                 0,
          //                 3,
          //                 1
          //               ],
          //               [
          //                 0,
          //                 4,
          //                 1
          //               ],
          //               [
          //                 0,
          //                 5,
          //                 1
          //               ]
          //             ],
          //             gridIndex: 1,
          //             xAxisIndex: 1,
          //             yAxisIndex: 1,
          //             label: {
          //               show: true,
          //               formatter: () => {
          //                 return `炉室: 15

          // 开始: 6.17 8:15

          // 结束: 7.15 23.35`
          //               },
          //               // textShadowColor: '#00e9f9',
          //               color: '#fff',
          //               // textShadowBlur: 6,
          //               align: 'left',
          //               offset: [-40, 0],
          //               lineHeight: 12,
          //               fontSize: 12
          //             },
          //             itemStyle: {
          //               borderWidth: 1,
          //               align: 'right',
          //               borderColor: 'rgba(12,145,255,.2)',
          //               color: '#125488'
          //             },
          //             emphasis: {
          //               itemStyle: {
          //                 shadowBlur: 10,
          //                 shadowColor: 'rgba(0, 0, 0, 0.5)'
          //               }
          //             }
          //           },
          //           {
          //             name: 'Punch Card',
          //             type: 'heatmap',
          //             data: [
          //               [
          //                 0,
          //                 0,
          //                 1
          //               ],
          //               [
          //                 0,
          //                 1,
          //                 1
          //               ],
          //               [
          //                 0,
          //                 2,
          //                 1
          //               ],
          //               [
          //                 0,
          //                 3,
          //                 1
          //               ],
          //               [
          //                 0,
          //                 4,
          //                 1
          //               ],
          //               [
          //                 0,
          //                 5,
          //                 1
          //               ]
          //               // [
          //               //   1,
          //               //   0,
          //               //   1
          //               // ],
          //               // [
          //               //   1,
          //               //   1,
          //               //   1
          //               // ],
          //               // [
          //               //   1,
          //               //   2,
          //               //   1
          //               // ],
          //               // [
          //               //   1,
          //               //   3,
          //               //   1
          //               // ],
          //               // [
          //               //   1,
          //               //   4,
          //               //   1
          //               // ],
          //               // [
          //               //   1,
          //               //   5,
          //               //   1
          //               // ]
          //             ],
          //             gridIndex: 2,
          //             xAxisIndex: 2,
          //             yAxisIndex: 2,
          //             label: {
          //               show: true,
          //               formatter: () => {
          //                 return `RP600 15支 24.56T

          // RP 500 24 支 12.333T

          // GG 560*450 7.15 23:35`
          //               },
          //               // textShadowColor: '#00e9f9',
          //               color: '#fff',
          //               // textShadowBlur: 6,
          //               align: 'left',
          //               offset: [-60, 0],
          //               lineHeight: 12,
          //               fontSize: 12
          //             },
          //             itemStyle: {
          //               borderWidth: 1,
          //               borderColor: 'rgba(12,145,255,.2)',
          //               color: '#125488'
          //             },
          //             emphasis: {
          //               itemStyle: {
          //                 shadowBlur: 10,
          //                 shadowColor: 'rgba(0, 0, 0, 0.5)'
          //               }
          //             }
          //           }
        ],
        backgroundColor: 'rgb(20,30,40)'
      }
      mycharts.setOption(option)
      mycharts.on('mousedown', (e) => {
        // console.log(e)
        if (e.componentIndex === 1 || e.componentIndex === 2) {
          this.dialogFormVisible = true
        } else {

        }
      })
      window.addEventListener('resize', function () {
        mycharts.resize()
      })
    }
  }
}
</script>
<style>
.select {
  background-color: #105994;
  border: 1px solid #0c91ff;
}

.el-select-dropdown__item {
  color: #fff
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #0c91ff;
}

.el-picker-panel {
  color: #fff;
}

.el-date-picker__header-label {
  color: #fff;
}

.el-date-table th {
  color: #fff;
}

.el-time-spinner__item {
  color: #fff;
}

.el-time-spinner__item.active:not(.disabled) {
  color: #0c91ff;
}
</style>

